import React, { PureComponent } from "react";
import { Flex } from "antd-mobile";
import s from './index.scss'
import { SingleImgView } from 'react-imageview'
import 'react-imageview/dist/react-imageview.min.css'
export default class extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
    };
  }
  componentDidMount() {
  
  }
 
  clickImg(cur){
    let {detail} = this.props
    const imagelist = [detail.materialList[0].picPath,detail.materialList[1].picPath,detail.materialList[2].picPath,detail.materialList[3].picPath]
    SingleImgView.show({ 
      imagelist,
      current:cur, 
      close: () => { SingleImgView.hide() } 
  });
  }
  render(){
    let {detail} = this.props
    return (<div className={`${s.tabOneBox}`}>
    <div>
      <Flex>
        <Flex.Item className={`${s.head}`}>项目信息</Flex.Item>
      </Flex>
      <div className={`${s.content}`}>
        <Flex>
          <Flex.Item className={`${s.item}`}>本期金额:&nbsp;&nbsp;{detail.loanInfo.amount}</Flex.Item>
        </Flex>
        <Flex>
          <Flex.Item className={`${s.item}`}>借款期限:&nbsp;&nbsp;{detail.loanInfo.termcount}个月</Flex.Item>
        </Flex>
        <Flex>
          <Flex.Item className={`${s.item}`}>年化利率:&nbsp;&nbsp;{detail.loanInfo.annualrate}%</Flex.Item>
        </Flex>
        <Flex>
          <Flex.Item className={`${s.item}`}>借款用途:&nbsp;&nbsp;{detail.loanInfo.borrowTypeCHN}</Flex.Item>
        </Flex>
        <Flex>
          <Flex.Item className={`${s.item}`}>还款方式:&nbsp;&nbsp;{detail.loanInfo.repayTypeStr}</Flex.Item>
        </Flex>
        <Flex>
          <Flex.Item className={`${s.item}`}>借款类型:&nbsp;&nbsp;{detail.loanInfo.loanTypeCHN}</Flex.Item>
        </Flex>
        <Flex>
          <Flex.Item className={`${s.item}`}>投标截至:&nbsp;&nbsp;{detail.loanInfo.openEndTime}</Flex.Item>
        </Flex>
      </div>
    </div>
    <div className={`${s.botDetailBox}`}>
      <Flex>
        <Flex.Item className={`${s.head}`}>项目简介</Flex.Item>
      </Flex>
      <div className={`${s.content}`}>
        <Flex className={`${s.indent}`}>
          {detail.loanInfo.description}
        </Flex>
      </div>
    </div>

    <div className={`${s.botDetailBox}`}>
      <Flex>
        <Flex.Item className={`${s.head}`}>房屋概况</Flex.Item>
      </Flex>
      <div className={`${s.content}`}>
        <Flex className={`${s.indent}`}>
          借款人提供{detail.houseInfo.houseAdress}{detail.houseInfo.houseInfo}{detail.houseInfo.areaOfStructure} 平米房产足值抵押，该房产市值约 {detail.houseInfo.totalPrice} 万元，
                    经专业评估所评估，评估值为{detail.houseInfo.totalPrice}万元，产权清晰，手续齐全。拟抵押自有房产向银行及相关债权人申请贷款。
                </Flex>
      </div>
    </div>

    {detail.picPath!=undefined&&detail.picPath!=null&&JSON.stringify(detail.picPath)!='[]'?
    <div className={`${s.botDetailBox}`}>
      <Flex>
        <Flex.Item className={`${s.head}`}>企业证件</Flex.Item>
      </Flex>
      <div className={`${s.content}`}>
        <Flex className={`${s.imgBox}`}>
          <Flex.Item className={`${s.imgBoxItem}`} onClick={this.clickImg.bind(this,0)}><img src={detail.materialList[0].picPath}/></Flex.Item>
          <Flex.Item className={`${s.imgBoxItem}`} onClick={this.clickImg.bind(this,1)}><img src={detail.materialList[1].picPath}/></Flex.Item>
          <Flex.Item className={`${s.imgBoxItem}`} onClick={this.clickImg.bind(this,2)}><img src={detail.materialList[2].picPath}/></Flex.Item>
        </Flex>
        <Flex className={`${s.imgBox}`}>
          <Flex.Item className={`${s.imgBoxItem}`} onClick={this.clickImg.bind(this,3)}><img src={detail.materialList[3].picPath}/></Flex.Item>
          <Flex.Item></Flex.Item>
          <Flex.Item></Flex.Item>
        </Flex>
      </div>
    </div>
    :null}
  </div>)
  }
  

}